<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
				list-style: none;
			}
			
			.rotation{
				width: 600px;
				height: 400px;
				margin: 0 auto;
				position: relative;
			}
			
			.rotation>img{
				position: absolute;
				top: 0;
				opacity: 0;
				transition: 1s;
			}
			
			button{
				width: 30px;
				height: 50px;
				border-radius: 6px;
				border: 0;
				font-size: 30px;
				position: absolute;
			}
			
			button:nth-of-type(1){
				top: 50%;
				margin-top: -25px;
				left: 10px;
			}
			
			button:nth-of-type(2){
				top: 50%;
				margin-top: -25px;
				right: 10px;
			}
			
			button:hover{
				cursor: pointer;
				background: #000;
				color: #fff;
			}
			
			ul{
				width: 50px;
				display: flex;
				justify-content: space-between;
				position: absolute;
				left: 50%;
				margin-left: -25px;
				bottom: 20px;
			}
			
			li{
				width: 10px;
				height: 10px;
				border-radius: 50%;
				background: #000;
				cursor: pointer;
			}
			
			img.active{
				opacity: 1;
			}
			
			li.active{
				background: #fff;
			}
		</style>
	</head>
	<body>
		<div class="rotation">
			<img class="active" src="img/house1.jpg"/>
			<img src="img/house3.jpg"/>
			<img src="img/house4.jpg"/>
			<!--<img src="img/showsmall1.jpg"/>-->
			<button><</button>
			<button>></button>
			
			<ul>
				<li zhn="0" class="active"></li>
				<li zhn="1"></li>
				<li zhn="2"></li>
			</ul>
		</div>
		
		<script type="text/javascript">
			var rotation={
				"imgs":document.getElementsByTagName("img"),
				"lis":document.getElementsByTagName("li"),
				"buts":document.getElementsByTagName("button"),
				"rotation":document.getElementsByClassName("rotation")[0],
				j:0,
//				timer:null,
				"init":function(){
					this.bind();
					this.time();
				},
				"bind":function(){
					var me=this;
					for(var i=0;i<this.buts.length;i++){
						this.buts[i].onclick=function(){
							if(this.innerText==">"){
								me.animation(1);
							}else{
								me.animation(-1);
							}
						}
					}
					
					for(var k=0;k<this.lis.length;k++){
						this.lis[k].onclick=function(){
							me.animation(undefined,this);
						}
					}
					
					this.rotation.onmouseover=function(){
						me.time(0);
					}
					
					this.rotation.onmouseout=function(){
						me.time(1);
					}
				},
				"animation":function(num,li){
					if(num){
						this.j+=num;
						if(this.j==3){
							this.j=0;
						}else if(this.j==-1){
							this.j=2;
						}
					}else{
						this.j=parseInt(li.getAttribute("zhn"));
					}
														
					for(var m=0;m<this.lis.length;m++){
						this.imgs[m].className="";
						this.lis[m].className="";
					}
					
					this.imgs[this.j].className="active";
					this.lis[this.j].className="active";
				},
				"time":function(data){
					var me=this;
//					if(this.timer===null){
//						this.timer=setInterval(function(){
//							me.animation(1);
//						},2000);
//					}else{
//						clearInterval(this.timer);
//						this.timer=null;					
//					}
//					timer=setInterval(function(){
//						me.animation(1);
//					},2000);
					
					if(data==0){
						clearInterval(timer);
					}else{
						timer=setInterval(function(){
							me.animation(1);
						},2000);
					}
				}
			}
			
			rotation.init();
		</script>
	</body>
</html>
